<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>借阅排行榜单</title>
    <link rel="icon" href="/static/images/t_logo.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/static/css/lyk-global.css" />
    <link rel="stylesheet" href="/static/elementui/lib/theme-chalk/index.css">
    <script src="/static/js/jquery.min.js" type="text/javascript"></script>
    <script src="/static/js/requestApi.js" type="text/javascript"></script>
    <script src="/static/js/vue/vue.js"></script>
    <!-- 引入elementui -->
    <script src="/static/elementui/js/element.js"></script>
    <script src="/static/js/axios.min.js"></script>
    <script src="/static/js/axios-config.js"></script>
    <script src="/static/js/moment.js"></script>
</head>
<style>
    [v-cloak] {
        display: none;
    }
    .r-rank{
        border-right: 1px solid #bbbbbb;
        border-bottom: 1px solid #bbbbbb;
    }
</style>
<body style="background-color: #fff">
<div id="app" v-cloak>
    <div class="mt-8 ml-4">
        <h3>借阅排行榜</h3>
        <span>选择时间：</span>
        <el-date-picker
                v-model="yearMonth"
                type="month"
                placeholder="选择月" size="small" class="ml-4" value-format="yyyy-MM" @change="getBorrowRankingMethod">
        </el-date-picker>
        <br/>

        <div v-for="(item,index) in tableData" :key="index" style="display:inline-block;width:35%;margin-left:5%;margin-top:20px;">
            <h3>{{item.typeName}}</h3>
            <el-table :data="item.children">
                <el-table-column prop="ranking" label="名次" width="150"></el-table-column>
                <el-table-column prop="bookName" label="书名" width="150">
                    <template slot-scope="scope">
                        <span class="copy-a" @click="jumptoBookDetail(scope.row.bookId)">{{scope.row.bookName}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="num" label="借阅次数"></el-table-column>
            </el-table>
        </div>
    </div>
</div>
</body>

<script type="text/javascript">
    const vm = new Vue({ // 配置对象 options
        // 配置选项(option)
        el: '#app', // element: 指定用vue来管理页面中的哪个标签区域
        components: {
        },
        data() {
            return {
                yearMonth:"",
                tableData:{},
            }
        },
        mounted() {
            let that = this;
            this.$nextTick(function () {
                that.yearMonth = moment().format("YYYY-MM");
                that.getBorrowRankingMethod();
            });
        },
        methods: {
            getBorrowRankingMethod(){
                let that = this;
                let json = {};
                requestApiTB("record/getBorrowRanking",{"yearMonth":that.yearMonth}, "POST", function(res){
                    if(res.code === 0){
                        if(res.data){
                            for(let i = 0 ; i < res.data.length ;i ++){
                                if(json.hasOwnProperty(res.data[i].typeId + "")){
                                    json[res.data[i].typeId + ""]["children"].push(res.data[i]);
                                }else{
                                    json[res.data[i].typeId + ""]={
                                    "typeId":res.data[i].typeId,
                                        "typeName":res.data[i].typeName,
                                        "children":[res.data[i]]
                                    };
                                }
                            }
                        }
                        that.tableData = json;
                    }else{
                        that.$message.error(res.msg);
                    }
                });
            },

            //跳转到书籍详情
            jumptoBookDetail(bookId){
                let that = this;
                if(!bookId){
                    return;
                }
                window.open("../book/bookDetail.html?bookId=" + bookId);
            },



        }
    })
</script>
</html>